<template>
  <div class="content">
    <div class="content-left">
      <div class="test">
                <img style="width:100%;height:100%;" src="../../assets/images/pull.png" alt="">
            </div>
    </div>
    <div class="content-middle">
      <div class="moudle-title">拦 物 网 数 据</div>
      <leftCenter chartId="d1"/>
      <leftCenter :chartId="'d2'"/>
      <leftCenter :chartId="'d3'"/>
      <leftCenter :chartId="'d4'"/>
    </div>
    <div class="content-right">
       <div class="pull-list">
        <div class="moudle-title">拦 物 网 数 据</div>
        <div class="pull-item" > <div class="left">1#拉力器 1</div> <div class="left">xxxxxxx</div> </div>
        <div class="pull-item" > <div class="left">1#拉力器 1</div> <div class="left">xxxxxxx</div> </div>
        <div class="pull-item" > <div class="left">1#拉力器 1</div> <div class="left">xxxxxxx</div> </div>
        <div class="pull-item" > <div class="left">1#拉力器 1</div> <div class="left">xxxxxxx</div> </div>
        <div class="pull-item" > <div class="left">1#拉力器 1</div> <div class="left">xxxxxxx</div> </div>
       </div>
       <div class="alrm-info">
        <rightCenter :title="'报 警 信 息'"/>
       </div>
    </div>
  </div>
</template>
  <script lang='ts' setup>
      import leftCenter from './components/leftCenter.vue'
      import rightCenter from '../home/components/rightCenter.vue'
</script>
  <style lang='scss' scoped>
.content {
  display: flex;
  justify-content: space-between;
  color: #fff;
  height: calc(100% - 90px);
  .content-left {
    width: 48%;
    height: auto;
    background-image: url('../../assets/images/u34.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .content-middle {
    width: 25%;
    height: auto;
    background-image: url('../../assets/images/u34.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .content-right {
    width: 24%;
    height: auto;
    background-image: url('../../assets/images/u34.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .pull-list{
      width: 70%;
      margin: 0 auto;
      height: 75%;
   
      .pull-item{
        width: 100%;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #d1d6da;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        background: #003759;
        margin-bottom: 8px;
        padding: 0 10px 0 30px;
      }
    }
  }
}
.moudle-title {
    color: #89d4af;
    font-size: 18px;
    text-align: center;
    padding: 18px 0;
  }
  .test{
     width: 90%;;
     height: 90%;
     margin: 0 auto;
     display: flex;
     align-items: center;
     margin-top: 38px;
}
</style>
  